<template>
	<view class="all">
		<view class="model">
			<view class="item" v-for="item in forumSorts" :key="item.id" @click="toForum(item.id)">
				<view class="icon forum">
					<uni-icons :type="item.icon" size="30" color="#fff"></uni-icons>
				</view>
				<view class="info">
					<view class="title">{{ item.title }}</view>
					<view class="content">{{ item.content }}</view>
				</view>
			</view>
		</view>
		
		<view class="model">
			<view class="item" @click="toTheme">
				<view class="icon">
					<uni-icons type="chatboxes-filled" size="30" color="#fff"></uni-icons>
				</view>
				<view class="info">
					<view class="title">智能问答</view>
					<view class="content">提出你的问题</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				forumSorts: [
					{
						id: 0,
						icon: 'heart-filled',
						title: '表白墙',
						content: '记录你的心情、留下祝福或赞美'
					},
					{
						id: 1,
						icon: 'wallet-filled',
						title: '二手交易',
						content: '记录你的心情、留下祝福或赞美'
					},
					{
						id: 2,
						icon: 'navigate-filled',
						title: '寻物', 
						content: '记录你的心情、留下祝福或赞美'
					}
				]
			}
		},
		methods: {
			toForum(id) {
				uni.navigateTo({
					url: '/pages/forum/forum?type=' + id
				})
			},
			toTheme() {
				uni.navigateTo({
					url: '/pages/theme/theme'
				})
			}
		}
	}
</script>

<style scoped>
	.model {
		width: 678rpx;
		margin: 40rpx auto;
		padding: 10rpx 0;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 16rpx  rgba(0, 0, 0, 0.08);
	}
	.model .item {
		width: 678rpx;
		padding: 15rpx 0;
		/* border-bottom: 1rpx solid #ccc; */
		display: flex;
		align-items: center;
	}
	
	.icon {
		width: 112rpx;
		height: 112rpx;
		margin: 0 20rpx;
		margin-right: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 1;
		background: rgba(255, 184, 77, 1);
		border-radius: 20rpx;
	}
	.forum {
		background-color: #197368;
	}
	
	.info {
		/* width: 244rpx; */
		height: 48rpx;
		opacity: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	} 
 	.info .title {
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 47.36rpx;
		color: #4E4E4E;
		text-align: left;
		vertical-align: top;
	}
	.info .content {
		width: 500rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #B9BAC7;
	}
</style>
